import React, { memo, useState } from "react"

import IconSearchBar from "@/assets/svg/icon-search-bar"
import { CenterWrapper } from "./style"
import SearchTitles from "@/assets/data/search_titles.json"
import classNames from "classnames"

const HeaderCenter = memo((props) => {
  const [showLine, setShowLine] = useState(0)
  const { showSearch, isShow, bottomIndex } = props
  // console.log(bottonIndex);

  function showSearchHandle() {
    showSearch && showSearch(true)
  }

  function showLineandle(index) {
    bottomIndex(index)
    setShowLine(index)
  }
  const SearchBarEl = (
    <div className="search-bar" onClick={showSearchHandle}>
      <div className="text">搜索房源与体验</div>
      <div className="icon">
        <IconSearchBar />
      </div>
    </div>
  )

  const SearchInfoEl = (
    <div className="search-info">
      <div className="titleTab">
        {SearchTitles.map((item, index) => {
          return (
            <span
              key={item.title}
              className={classNames({ active: index === showLine })}
              onClick={(e) => showLineandle(index)}
            >
              {item.title}
            </span>
          )
        })}
      </div>
    </div>
  )
  return <CenterWrapper>{isShow ? SearchInfoEl : SearchBarEl}</CenterWrapper>
})

export default HeaderCenter
